@use "@configured-variables" as variables;
@use "@layouts/styles/mixins" as layoutsMixins;

// 演示间距
// TODO: 使用 Vuetify SCSS 变量
$card-spacer-content: 16px;

.demo-space-x {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-block-start: -$card-spacer-content;

  & > * {
    margin-block-start: $card-spacer-content;
    margin-inline-end: $card-spacer-content;
  }
}

.demo-space-y {
  & > * {
    margin-block-end: $card-spacer-content;

    &:last-child {
      margin-block-end: 0;
    }
  }
}

// 卡片高度匹配
.match-height.v-row {
  .v-card {
    block-size: 100%;
  }
}

// 中文强制不换行
.whitespace-no-wrap {
  white-space: nowrap;
}

// 颜色
// 在 Vuetify 2 中，通过设置 $color-pack: false 变量配置徽章图标
// 在 Vuetify 3 中，徽章图标应用 .text-white 类，但没有提供相应的样式
// 由于.text-white 类在 Vuetify 3 源码中多处使用，所以这里使用 !important 来确保徽章图标的颜色正确
.text-white {
  color: #fff !important;
}

.bg-var-theme-background {
  background-color: rgba(var(--v-theme-on-background), 0.08) !important;
}

// [/^bg-light-(\w+)$/, ([, w]) => ({ backgroundColor: `rgba(var(--v-theme-${w}), var(--v-activated-opacity))` })],
@each $color-name in variables.$theme-colors-name {
  .bg-light-#{$color-name} {
    background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important;
  }
}

// clamp 截断文本并添加省略号
.clamp-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}

.leading-normal {
  line-height: normal !important;
}

// 只在 RTL 中使用
.flip-in-rtl {
  @include layoutsMixins.rtl {
    transform: scaleX(-1);
  }
}

// Carousel 走马灯
.carousel-delimiter-top-end {
  .v-carousel__controls {
    justify-content: end;
    block-size: 40px;
    inset-block-start: 0;
    padding-inline: 1rem;

    .v-btn--icon.v-btn--density-default {
      block-size: calc(var(--v-btn-height) + -10px);
      color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
      inline-size: calc(var(--v-btn-height) + -8px);

      &.v-btn--active {
        color: #fff;
      }

      .v-btn__overlay {
        opacity: 0;
      }

      .v-ripple__container {
        display: none;
      }

      .v-btn__content {
        .v-icon {
          block-size: 8px !important;
          inline-size: 8px !important;
        }
      }
    }
  }

  @each $color-name in variables.$theme-colors-name {

    &.dots-active-#{$color-name} {
      .v-carousel__controls {
        .v-btn--active {
          color: rgb(var(--v-theme-#{$color-name})) !important;
        }
      }
    }
  }
}

// 表格中的小形分页选择框
// TODO: 在 Vuetify datatable 实现后删除此类
.per-page-select {
  margin-block: auto;

  .v-field__input {
    align-items: center;
    padding: 2px;
    font-size: 14px;
  }

  .v-field__append-inner {
    align-items: center;
    padding: 0;
    margin-inline-start: -2.5rem;

    .v-icon {
      margin-inline-start: 0 !important;
    }
  }
}

.v-timeline-item {
  .app-timeline-title {
    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3125rem;
  }

  .app-timeline-meta {
    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
    font-size: 12px;
    line-height: 0.875rem;
  }

  .app-timeline-text {
    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
    font-size: 14px;
    line-height: 1.25rem;
  }
}
